<template>
    <div class="codelogin">
        <Head title="帐号登录" :left="true"></Head>
 <div class="sub-child">
      <div class="logo-box">
        <img src="../../../public/img/logo.png" alt="" />
      </div>

      <div class="login-box">
        <van-form @submit="onSubmit">
          <van-field
           
            v-model="codelogin.mobile"
            name="mobile"
            left-icon="user-o"
            placeholder="请输入手机号码"
            :rules="[{ required: true, message: '请填写电话 ' },
            { pattern:phoneReg, message: '请输入正确手机号' }]"
          />



          <van-field
          
            v-model="codelogin.captcha"
            type="number"
            name="captcha"
            placeholder="请输入验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
          >
            <template #button>
              <div class="code-btn-box">
                  <van-button :disabled="isSend" size="mormal" color="#333333" @click="getcode">发送验证码 <span v-show="show">({{ num }}s)</span></van-button>
              </div>
            </template>
          </van-field>

          <div class="chooselogin">
            <p>忘记密码</p>
            <p @click="gotologin1" >密码登录</p>
          </div>
          


          <div style="margin: 16px; margin-top: 40px">
            <van-button
              color="#333333"
              block
              type="info"
              native-type="submit"
             
              >登录</van-button
            >
          </div>
        </van-form>

      </div>
  
    </div>

           <div class="noclient">
              <p>还没有账户？ <span @click="gotoregister">马上注册</span> </p>
            </div>
    
    </div>

    
</template>

<script>
import{phoneReg,passReg,mailReg} from "@/utils/tool"
import { Notify } from 'vant';
export default {
  data() {
    return {
    show:false,
    num:10,
    isSend:false,
      codelogin: {},
      phoneReg,
      passReg,
      mailReg,
      type_1:"password",
      timer: null,
      

    };
  },
  mounted(){
    let phone = localStorage.getItem('mobile')
    phone=this.$route.query.mobile?this.$route.query.mobile:''
    this.login={...this.login,mobile:phone}
    this.codelogin={...this.codelogin,mobile:phone}
  },
  methods: {
    onSubmit(values) {
      console.log(values);
      this.$ajax.sendCode(values)
      .then(res=>{
          // console.log(res)
          if(res.type==1){
            Notify({ type: 'success', message: res.msg });
            localStorage.setItem('mobile',values.mobile);
            localStorage.setItem("token", res.token);
            this.$router.push({name:'mine',query:{mobile:values.mobile}})
          }else{
            Notify({ type: 'warning', message: res.msg });
          }
      }).catch(err=>{
            Notify({ type: 'danger', message: err.msg});
      })
    },
    gotoregister(){
      this.$router.push({name:'register'})
    },
    gotologin1(){
        this.$router.push({name:'login'})
    },
    getcode(){
        this.isSend = true;
      this.show = true;
      this.timer = setInterval(() => {
        if (this.num > 1) {
          this.num--;
        } else {
          clearInterval(this.timer);
          this.isSend = false;
          this.show = false;
          this.num = 10;
        }
      }, 1000);

    let isphone = this.codelogin.mobile
    console.log(isphone)

      if(isphone!=''){
        //发送验证码请求
                this.$ajax.getCode({
                    phone:this.codelogin.mobile
                }).then(res=>{
                    console.log(res)
                    if(res.code==200){
                    Notify({ type: 'success', message: res.msg });
                    }else{
                    Notify({ type: 'danger', message: res.msg });
                    }
                })
            }else{
                Notify({ type: 'warning', message: '请填写手机号' }); 
            }
      }

      

      
    
    

  },
};
</script>

<style lang="scss" scoped>
::v-deep .head {
  .van-nav-bar__title, .van-ellipsis {
    color: #323233;
    font-size: 14px !important;
  }
}
.codelogin {
  height: 100%;
  background-color: #fff;
  .logo-box {
    display: flex;
    justify-content: center;
    margin-top: 32px;
    img {
      width: 120px;
    }
  }
  .login-box {
    padding: 0 48px;
  }
  .van-cell,
  .van-field {
    margin-top: 12px;
  }
  .van-checkbox__label {
    font-size: 12px;
  }
  .chooselogin{
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    margin: 12px 0;
    p{
      color: #999;
      font-size: 15px;
    }
  }
  .noclient{
    text-align: center;
    color: #999; 
    font-size: 15px;
    margin-top: 30px;
    span{
      color: #333333;
    } 
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 80%;
  height: 80%;
  background-color: #fff;
  border-radius: 13px;
}

::v-deep .van-icon-closed-eye{
  font-size: 25px !important;
}
::v-deep .van-icon-eye-o{
  font-size: 25px !important;
}
::v-deep .van-icon-user-o{
  font-size: 25px !important;
}
::v-deep  .van-icon-warn-o{
  font-size: 25px !important;
}

::v-deep .van-button--default, .van-button--mormal{
  padding: 0 10px;
}
</style>